<template>
	<view class="big_box">
		<view class="box" v-for="item in list1">
			<view @click="tz(item)">
				<view class="box_1">
					<image src="../../static/75.png" mode=""></image>
					<view class="box_2">{{item.query11}}</view>
				</view>
				<view class="box_3">
					<view class="box_4">姓名</view>
					<view>{{item.query01}}</view>
				</view>
				<view class="box_3">
					<view class="box_4">车牌号</view>
					<view>{{item.query03}}</view>
				</view>
				<view class="box_3">
					<view class="box_4">逾期期数</view>
					<view>{{item.query09}}</view>
				</view>
				<view class="box_3">
					<view class="box_4">手机号</view>
					<view>{{item.query15}}</view>
				</view>
			</view>
			<view class="box_5" @click="sprz(item)">
				<view>处理日志</view>
				<image src="../../static/77.png" mode=""></image>
			</view>
			<!-- 小车背景图片 -->
			<view class="box_6"><image src="../../static/76.png" mode=""></image></view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option:[],
				list1:[],
				num:1
			}
		},
		onReachBottom() {
			console.log(this.type1)
			this.num ++ 
			this.initial()
		},
		onLoad:function(option){
			this.option = JSON.parse(option.item)
			this.initial()
			console.log(JSON.parse(option.item))
		},
		methods: {
			tz:function(item){
				uni.navigateTo({
					url:'../order_list/order_list?item=' + JSON.stringify(item)
				})
			},
			sprz:function(item){
				uni.navigateTo({
					url:'../sprz/sprz?item=' + JSON.stringify(item)
				})
			},
			initial:function(){
				this.$get('busedh/fxjBuse_15/list',{
					pageNo:this.num,
					pageSize:10,
					query11:this.option.query01
				}).then(res=>{
					if(this.num == 1){
						this.list1 = res.data.result.records
					}else{
						if(res.data.result.records == ''){
							uni.showToast({
								title:'没有更多数据了~',
								icon:'none'
							})
						}else{
							res.data.result.records.forEach((item)=>{
								this.list1.push(item)
							})
						}
						
					}
					console.log(res.data.result.records)
				})
			}
		}
	}
</script>

<style>
	.box_5>image{
		width: 13rpx;
		height: 22rpx;
	}
	.box_5{
		width: 90%;
		height: 75rpx;
		/* padding-top: 20rpx; */
		border-top: 1px solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(58,98,255,1);
		position: absolute;
		z-index: 100;
	}
	.box_4{
		width: 160rpx;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		margin-right: 30rpx;
	}
	.box_3{
		display: flex;
		align-items: center;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		margin-bottom: 14rpx;
	}
	.box_2{
		padding: 3rpx 25rpx;
		box-sizing: border-box;
		border:1rpx solid #4185F5;
		border-radius:200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#4185F5;
		margin-right: 10rpx;
	}
	.box_1>image{
		width: 60rpx;
		height: 41rpx;
		margin-right: 40rpx;
	}
	.box_1{
		display: flex;
		align-items: center;
		font-size:34rpx;
		font-family:PingFang SC;
		font-weight:800;
		color:rgba(51,51,51,1);
		margin-bottom: 35rpx;
	}
	.box_6>image{
		width: 100%;
		height: 100%;
	}
	.box_6{
		width: 300rpx;
		height: 200rpx;
		position: absolute;
		bottom: 28rpx;
		right: -100rpx;
	}
	.box{
		height: 370rpx;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius:10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		margin: 10rpx;
		margin-bottom: 30rpx;
	}
	.big_box{
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>
